<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
</body>

</html>
<script>
    //async await ES7里面的语法是ES6的 genrator + Promise组合起来的语法糖

    //编写的时候,能够感觉像同步一样处理

    //用于处理异步流程

    //传统的ajax带来的问题:回调地狱,可读性非常的差

    //解决的方案:Promise

    //Promise的优势:链式流程化的编程,不用回调嵌套那么多层数

    // new Promise(function (resolve, reject) {
    //     console.log(0)
    //     resolve('1')
    // })
    //     .then(res => {
    //         console.log(res)
    //     })


    // console.log(2)

    //Promise的写法

    // fetch('http://chst.vip/data/index.json')
    //     .then(body => body.json())
    //     .then(res => {
    //         console.log(res)
    //         let el = res.data.reduce((el, item) => {
    //             return el += `
    //             <p>${item.title}</p>
    //             `
    //         }, "")

    //         console.log(el)
    //         container.innerHTML = el

    //     })


    //async await写法 一对比翼鸟 不能单独使用await

    //本质就是等待Promise的resolve状态之后再往下执行 yeild

    async function render() {
        console.log(222)
        //1.发送请求
        // 等待异步执行的结果
        let result = await fetch("http://chst.vip/data/index.json")
            .then(body => body.json())

        // new Promise((resolve, reject) => {
        //     setTimeout(() => {
        //         resolve('success')
        //     }, 2000)
        // })
        //     .then(res => {
        //         console.log(res)
        //     })

        // console.log(result)
        let el = result.data.reduce((el, item) => {
            return el += `
                <p>${item.title}</p>
                `
        }, "")

        console.log(el)
        container.innerHTML = el

    }

    render()

    console.log(1111)

    console.log(render()) //Promise<pendding>

    //面试题:async函数的本质是什么?答:是个promise
</script>